<!--
 *@开发者: 刘翔
 *@创建时间: 2024-04-28 10:38:19
 *@描述:科室超支TOP10
!-->
<template>
  <div class="page-tile-13">
    <div class="page-tile-13-top">
      <formList topHeightValue="10%" bottomHeightValue="90%" :formParameter="formParameter" :data_list="data_list" />
    </div>
    <div class="page-tile-13-bottom" ref="pageTitle13EchartsRefs"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import formList from '../components/formList/formList';

export default {
  // 组件名称
  name: 'pageTile13',
  // 组件参数 接收来自父组件的数据
  props: {},
  // 局部注册的组件
  components: {
    formList,
  },
  // 组件状态值
  data() {
    return {
      data_list: [],
      formParameter: [
        { width: '10%', title: '科室' },
        { width: '10%', title: '病例数' },
        { width: '7%', title: 'CMI' },
        { width: '10%', title: '合计盈亏(万元)' },
        { width: '10%', title: '平均住院日' },
        { width: '13%', title: '例均医保拨付费用' },
        { width: '10%', title: '本院例均费用' },
        { width: '10%', title: '例均盈亏' },
        { width: '10%', title: '药品费占比' },
        { width: '10%', title: '材料费占比' },
      ],
    };
  },
  // 计算属性
  computed: {},
  // 侦听器
  watch: {},
  // 组件方法
  methods: {
    init(data, titleKey) {
      if (titleKey === '科室超支TOP10') {
        this.formParameter = [
          { width: '10%', title: '科室' },
          { width: '10%', title: '病例数' },
          { width: '7%', title: 'CMI' },
          { width: '10%', title: '合计盈亏(万元)' },
          { width: '10%', title: '平均住院日' },
          { width: '13%', title: '例均医保拨付费用' },
          { width: '10%', title: '本院例均费用' },
          { width: '10%', title: '例均盈亏' },
          { width: '10%', title: '药品费占比' },
          { width: '10%', title: '材料费占比' },
        ];
      } else {
        this.formParameter = [
          { width: '10%', title: '医疗组' },
          { width: '10%', title: '病例数' },
          { width: '7%', title: 'CMI' },
          { width: '10%', title: '合计盈亏(万元)' },
          { width: '10%', title: '平均住院日' },
          { width: '13%', title: '例均医保拨付费用' },
          { width: '10%', title: '本院例均费用' },
          { width: '7%', title: '例均盈亏' },
          { width: '7%', title: '例均点数' },
          { width: '8%', title: '药品费占比' },
          { width: '8%', title: '材料费占比' },
        ];
      }
      let data_list = data.data_list;
      this.echartsInit(data_list);
    },
    // 图表
    echartsInit(data_list) {
      this.data_list = data_list;
      let myChart = echarts.init(this.$refs.pageTitle13EchartsRefs);
      let option;
      const colors = ['#ffb672', '#5470c6', '#EE6666'];
      option = {
        color: colors,
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
          },
        },
        legend: {
          data: ['合计盈亏(万元)', '本院例均费用', '病例数'],
          top: '5%',
        },
        xAxis: [
          {
            type: 'category',
            axisTick: {
              alignWithLabel: true,
            },
            axisLabel: {
              fontSize: 14,
              formatter: function (value) {
                var maxLength = 10; // 每行显示的最大字符数
                var result = '';
                for (var i = 0; i < value.length; i++) {
                  result += value[i];
                  if ((i + 1) % maxLength === 0) {
                    result += '\n'; // 每maxLength字符换行
                  }
                }
                return result;
              },
            },
            // prettier-ignore
            data: [],
          },
        ],
        yAxis: [
          {
            type: 'value',
            name: '病例数',
            position: 'right',
            alignTicks: true,
            nameTextStyle: {
              fontSize: 14,
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: colors[0],
              },
            },
          },
          {
            type: 'value',
            name: '本院例均费用',
            position: 'right',
            alignTicks: true,
            nameTextStyle: {
              fontSize: 14,
            },
            offset: 80,
            axisLine: {
              show: true,
              lineStyle: {
                color: colors[1],
              },
            },
          },
          {
            type: 'value',
            name: '合计盈亏(万元)',
            position: 'left',
            alignTicks: true,
            nameTextStyle: {
              fontSize: 14,
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: colors[2],
              },
            },
            axisLabel: {
              formatter: '{value}',
            },
          },
        ],
        series: [
          {
            name: '病例数',
            type: 'line',
            data: [],
            barMaxWidth: 50,
            label: {
              show: true,
              fontSize: 18,
              textBorderWidth: 3,
            },
          },
          {
            name: '本院例均费用',
            type: 'bar',
            yAxisIndex: 1,
            barMaxWidth: 50,
            data: [],
            label: {
              show: true,
              position: 'top',
              fontSize: 18,
              textBorderWidth: 1,
            },
          },
          {
            name: '合计盈亏(万元)',
            type: 'bar',
            yAxisIndex: 2,
            barMaxWidth: 50,
            data: [],
            label: {
              show: true,
              position: 'top',
              fontSize: 18,
              formatter: function (params) {
                var colorStyle = params.value > 0 ? 'c' : 'd';
                return `{${colorStyle}|${params.value}}{${colorStyle}|万}`;
              },
              rich: {
                c: {
                  color: '#5470c6',
                  fontSize: 18,
                },
                d: {
                  color: '#ee6666',
                  fontSize: 18,
                },
              },
            },
          },
        ],
      };
      data_list.forEach((item, index) => {
        option.xAxis[0].data.push(item[this.formParameter[0].title]);
        option.series[0].data.push(item['病例数']);
        option.series[1].data.push(item['本院例均费用']);
        option.series[2].data.push(item['合计盈亏(万元)']);
      });
      option && myChart.setOption(option);
    },
  },
  created() {},
  mounted() {},
};
</script>

<style lang="less" scoped>
.page-tile-13 {
  height: 100%;
  .page-tile-13-top {
    height: 60%;
  }
  .page-tile-13-bottom {
    height: 40%;
  }
}
</style>
